<template>
	<view class="all">
		<!--标题-->
		<view class="title">欢迎来到解忧杂货店！</view>

		<view class="uni-column">
			<view class="tip">账号：</view>
			<input v-model="form.username" class="uni-input" />
			<view class="tip">密码：</view>
			<input v-model="form.password" class="uni-input" type="password" />
		</view>

		<!--回复人登录-->
		<view class="wechat" @click="login">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: null,
					password: null
				}
			}
		},
		methods: {
			login() {
				this.$request.post('/mini/replier/login', this.form).then(res => {
					if (res.code === 200) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('user', res.data.loginUser)
						uni.switchTab({
							url: '/pages/index/index',
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.all {
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 50rpx;
		margin: 0 auto;
		margin-top: 150rpx;
	}

	.wechat {
		margin: 0 auto;
		margin-top: 200rpx;
		height: 110rpx;
		width: 80%;
		text-align: center;
		line-height: 100rpx;
		background: rgba(0, 134, 118, 1);
		box-shadow: 0px 3px 12px rgba(54, 139, 232, 0.24);
		border-radius: 25rpx;
		font-size: 38rpx;
		color: rgba(255, 255, 255, 1);
	}
	
	.uni-column {
		width: 80%;
		margin: 0 auto;
		margin-top: 150rpx;
	}
	.tip {
		margin-top: 50rpx;
	}
	.uni-input {
		height: 50rpx;
		border-bottom: 1rpx solid #008676;
	}
</style>